<template>
  <div class="xgybgboxdetail">

    <div class="lefttoppoint round"></div>
    <div class="leftdownpoint round"></div>
    <div class="righttoppoint round"></div>
    <div class="rightdownpoint round"></div>
    <div class="lefttopradiaus radiaus"></div>
    <div class="leftdownradiaus radiaus"></div>
    <div class="rightdownradiaus radiaus"></div>
    <div class="righttopradiaus radiaus"></div>
    <div class="bgbox">

    </div>
    <div class="content">
      <div class="contenttitle">
        <slot name="contenttitle">

        </slot>
      </div>
      <div class="contentbody">
        <slot name="contentbody">

        </slot>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "XgyBgBoxDetail"

}
</script>

<style lang="less" scoped>
.xgybgboxdetail {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
  background-color: transparent;
  border: 0.1rem solid #dcfcfa;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  .lefttoppoint {
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
  }
  .bgbox {
    width: 108%;
    height: 103%;
    position: absolute;
    background-image: url("../../assets/driverhouseimg/detailboxbg.png");
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: -2rem -45px;
    border-radius: 0.15rem;
  }

  .radiaus {
    position: absolute;
    width: 0.05rem;
    height: 0.05rem;
    box-sizing: content-box;
  }
  .lefttopradiaus {
    border-top: 0.1rem solid #859896;
    border-left: 0.1rem solid #859896;
    border-top-left-radius: 0.1rem;
    left: -0.1rem;
    top: -0.1rem;
  }
  .leftdownradiaus {
    border-bottom: 0.1rem solid #859896;
    border-left: 0.1rem solid #859896;
    border-bottom-left-radius: 0.1rem;
    left: -0.1rem;
    bottom: -0.1rem;
  }
  .rightdownradiaus {
    border-bottom: 0.1rem solid #859896;
    border-right: 0.1rem solid #859896;
    border-bottom-right-radius: 0.1rem;
    right: -0.1rem;
    bottom: -0.1rem;
  }

  .righttopradiaus {
    border-top: 0.1rem solid #859896;
    border-right: 0.1rem solid #859896;
    border-top-right-radius: 0.1rem;
    right: -0.1rem;
    top: -0.1rem;
  }
  .round {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background-color: #74d7e2;
  }
  .leftdownpoint {
    position: absolute;
    left: 0.15rem;
    bottom: 0.15rem;
  }
  .righttoppoint {
    position: absolute;
    right: 0.15rem;
    top: 0.15rem;
  }
  .rightdownpoint {
    position: absolute;
    right: 0.15rem;
    bottom: 0.15rem;
  }
  .content {
    width: 100%;
    .contenttitle {
      font-size: 0.6rem;
      height: 20%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      border-bottom: 0.05rem solid #74d7e2;
    }
    .contentbody {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80%;
      font-size: 0.9rem;
      color: white;
    }
  }
}
</style>